<template>
	<view class="r-main">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title=" " color="#000" backgroundColor="">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<view class="r-header text-center text-bold">输入邀请码</view>
		<view class="r-list">
			<view class="r-item pl-lg pr-lg flex fill-body radius-16 mb-sm">
				<input type="number" v-model="subForm.code" class="flex-1 f-min-title" placeholder="请输入邀请码" />
			</view>
			<view class="a-btn c-base f-title text-center radius-16 mt-lg" @tap="toLogin"
				:style="{backgroundColor:primaryColor}">确定提交</view>
			<view class="f-desc text-center pt-md" :style="{color:primaryColor}"
				@tap="this.$util.goUrl({url: `/pages/service`,openType: `reLaunch`})">跳过该流程</view>
		</view>

	</view>
</template>

<script>
	import siteInfo from '@/siteinfo.js';
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				subForm: {
					code: ''
				},
				rule: [{
					name: "code",
					checkType: "isNotNull",
					errorMsg: "请输入邀请码",
					regText: "邀请码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		methods: {
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async toLogin() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.login.bindCode(param)
					this.$util.hideAll()
					this.lockTap = false
					this.$util.showToast({
						title: '提交成功'
					})
					setTimeout(() => {
						this.$util.goUrl({
							url: `/pages/service`,
							openType: `reLaunch`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.r-header {
		font-size: 54rpx;
		padding: 100rpx 0;
	}

	.r-list {
		padding: 0 60rpx;

		.r-item {
			input {
				height: 110rpx;
			}
		}

		.a-btn {
			height: 110rpx;
			line-height: 110rpx;
		}

		.box-text {
			letter-spacing: 1px;
			line-height: 32rpx;
			color: #6C727F;
		}
	}
</style>
